<template>
	<section class="menuManage">
		<el-form :inline="true" class="header">
			<el-button type="primary" icon="plus" size="small" @click.native='addMenu()'>菜单录入</el-button>
			<!-- <el-button type="primary" icon="edit" size="small" @click.native='editMenu()'>菜单编辑</el-button> -->
		</el-form>
		<el-row class="contentDiv">
			<el-col :span="15" class="treeDiv">
			    <el-tree
			    	ref="tree"
                    :data="tree.treeData"
                    :props="tree.props"
                    v-loading="tree.treeLoading"
                    :load="loadNode"
                    lazy
                    node-key="id"
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    :render-content="renderContent"
                    @node-click="handleNodeClick">
                </el-tree>
			</el-col>
			<el-col :span='9' class="rightDiv">
				<el-row class="header">
					<h3>操作管理</h3>
				</el-row>
				<el-row class="content" v-loading="rightDiv.loading">
					<el-button type="primary" icon="plus" size="small" @click.native="addControl()">操作录入</el-button>
					<el-table :data="rightDiv.rightData"style="width: 100%">
                        <el-table-column prop="operationName" label="操作名称" width="100">
                        </el-table-column>
                        <el-table-column prop="operationCode" label="代码 " width="80">
                        </el-table-column>
                        <el-table-column prop="functionName" label="权限名称 ">
                        </el-table-column>
                        <el-table-column label="操作">
                        	<template scope="scope">
                                <el-button type="" size="small" @click.native="editControl(scope)">编辑</el-button>
                                <el-button type="danger" size="small" @click.native="delControl(scope)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
				</el-row>
				<el-pagination
                    @current-change="pageChange()"
                    :current-page.sync="rightDiv.page"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="rightDiv.total">
                 </el-pagination>
			</el-col>
			<!-- 弹窗  -->
		    <el-dialog :title="dialog.title" v-model="dialog.show" @open="dialogShow()">
		    	<el-form :inline="true"  :model="controlForm" :rules="controlForm.rules"  label-width="85px" v-if=" dialog.dialogType=='Control' ">
		    		<el-form-item label="操作名称" prop="name">
                        <el-input v-model="controlForm.name" placeholder="操作名称"></el-input>
                        <span class="warning">菜单名称范围2~20位字符,且不为空</span>
                    </el-form-item>
                    <el-form-item label="操作代码" prop="code">
                        <el-input v-model="controlForm.code" placeholder="操作代码"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="controlForm.status">
                            <el-option label="否" value="1"></el-option>
                            <el-option label="是" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="text-align: right;width: 100%;">
                        <el-button type="primary" @click.native="controlSubmit()">确定</el-button>
                        <el-button @click.native="dialog.show=false">取消</el-button>
                    </el-form-item>
		    	</el-form>	
                <el-form :inline="true" :model="Form" :rules="Form.rules"  label-width="85px" v-else>
            	    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="Form.menuName" placeholder="菜单名称"></el-input>
                        <span class="warning">菜单名称范围4~15位字符,且不为空</span>
                    </el-form-item>
                    <el-form-item label="菜单类型" prop="type">
                        <el-select v-model="Form.type">
                            <el-option label="菜单类型" value="0"></el-option>
                            <el-option label="访问类型" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="菜单等级" prop="level">
                        <el-select v-model="Form.level">
                            <el-option label="一级菜单" value="0"></el-option>
                            <el-option label="下级菜单" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="父菜单" v-if=" Form.level=='1' " style="display: block;">
                        <el-input v-model="Form.parentMenu" @click.native="treeShow=!treeShow"></el-input>
                        <el-tree
                        style="max-height:300px;overflow: scroll;position: absolute;width: 100%;z-index: 5;"
                        ref="tree"
                        v-show="treeShow"
                        :data="tree.menuData"
                        :props="tree.props"
                        v-loading="tree.treeLoading"
                        :load="loadNode"
                        lazy
                        node-key="id"
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        @node-click="handleNodeClick2">
                        </el-tree>
                        <!-- <el-select v-model="Form.parentMenu">
                            <el-option :label="item.text" :value="item.id" v-for="(item,index) in tree.menuData" :key="index"></el-option>
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="菜单or功能">
                        <el-select v-model="Form.isMenu">
                            <el-option label="菜单" value="0"></el-option>
                            <el-option label="功能" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="前端展示">
                        <el-select v-model="Form.isFront">
                            <el-option label="否" value="1"></el-option>
                            <el-option label="是" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                        <el-form-item label="菜单顺序" prop="menuOrder">
                            <el-input v-model.number="Form.menuOrder" placeholder="菜单顺序"></el-input>
                        </el-form-item>
                    <el-form-item label="菜单地址">
                        <el-input v-model="Form.menuUrl" placeholder="菜单地址"></el-input>
                    </el-form-item>
                    <el-form-item label="前端图标">
                        <el-input v-model="Form.iconName" placeholder="前端图标"></el-input>
                    </el-form-item>
                    <el-form-item label="组件名称">
                        <el-input v-model="Form.componentName" placeholder="组件名称"></el-input>
                    </el-form-item>
                    <el-form-item label="扩展信息">
                        <el-input v-model="Form.meta" placeholder="扩展信息"></el-input>
                        <span class="warning">用于权限判定，非必填字段</span>
                    </el-form-item>
                    <el-form-item style="text-align: right;width: 100%;">
                        <el-button type="primary" @click.native="onSubmit()">确定</el-button>
                        <el-button @click.native="dialog.show=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
		</el-row>	
	</section>
</template>
<script>
	import NProgress from 'nprogress'
  	import { getMenuList,addMenu,delMenu,getBtnSetting,addControl,delControl,getMenuDetail } from '../../api/system';
  	export default {
  		data(){
  			return {
                treeShow:false,
  				tree:{
  					treeData:[],
  					props: {
                        label: 'text',
                        children: 'zones',
                    },
                    treeLoading:false,
                    checkItem:'',
                    menuData:[]
  				},
  				rightDiv:{
                	type:'页面权限规则',
                	rightData:[],
                	loading:false,
                	page:1,
                	rows:10,
                	total:0,
                	id:''
                },
                dialog:{
                	title:'',
                	show:false,
                	dialogLoading:false,
                	dialogType:'addMenu'
                },
                Form:{
                	menuName:'',
                	type:'0',
                	level:'0',
                	menuUrl:'',
                	menuOrder:'',
                	isMenu:'1',
                	isFront:'1',
                	parentMenu:'',
                	componentName:'',
                	iconName:'',
                	meta:'',
                	rules:{
                		menuName: [
                            { required: true, message: '请输入菜单名称', trigger: 'blur' },
                            { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
                        ],
                        type: [
                            { required: true, message: '请选择菜单类型', trigger: 'blur' }
                        ],
                        level: [
                            { required: true, message: '请选择菜单类型', trigger: 'blur' }
                        ],
                        menuOrder: [
                            { required: true, message: '菜单顺序不能为空'},
                        ],
                	}
                },
                controlForm:{
                	name:'',
                	code:'',
                	status:'1',
                	rules:{
                		name:[
                		    { required: true, message: '请输入操作名称', trigger: 'blur' },
                            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                		],
                		code:[
                		    { required: true, message: '请选择操作代码', trigger: 'blur' }
                		],
                		status:[
                		    { required: true, message: '请选择操作状态', trigger: 'blur' }
                		]
                	}
                }
  			}
  		},
  		methods: {
  			getMenuList(){
  				this.tree.treeLoading=true;
  				let para={'field':'id,functionName,functionUrl,functionOrder'};
  				getMenuList(para).then((res)=>{
            		this.tree.treeData=res;
                    this.tree.menuData=res;
            		this.tree.treeLoading=false;
	          	});
  			},

            //获取子树的方法
            loadNode(node,resolve){
            	let para={'field':'id,functionName,functionUrl,functionOrder'};
            	para.id=node.data.id;
            	getMenuList(para).then((res)=>{
            		var data;
            		if(res.length){
            			if(!node.data.id){
            			    this.tree.menuData=res;   
            		    }
            			data=res;
            		}
            		else{data=[];}
            		resolve(data);
	          	});
            },
            handleNodeClick(data, node, indeterminate) {
            	this.tree.checkItem=data;
            },
            handleNodeClick2(data, node, indeterminate) {
                this.Form.parentMenu=data.functionname;
                this.Form.parentMenuId=data.id;
                this.treeShow=false;
            },
            //菜单录入
            addMenu(){
            	this.dialog.show=true;
            	this.dialog.dialogLoading=true;
            	this.dialog.dialogType='addMenu';
            	this.dialog.title='菜单录入';
            	this.Form.menuName='';
            	this.Form.type='0';
                this.Form.level='0';
                this.Form.menuUrl='';
                this.Form.menuOrder='';
                this.Form.isMenu='1';
                this.Form.isFront='1';
                this.Form.parentMenu='';
                this.Form.parentMenuId='';
                this.Form.iconName='';
                this.Form.componentName='';
                this.Form.meta='';
            },
            //弹窗回调
            dialogShow(){
            	this.dialog.dialogLoading=false;
            },
            //提交按钮
            onSubmit(){
            	let para={'functionName':this.Form.menuName,
            	          'functionType':this.Form.type,
            	          'functionLevel':this.Form.level,
            	          'functionOrder':this.Form.menuOrder,
            	          'functionUrl':this.Form.menuUrl,
            	          'isMenu':this.Form.isMenu,
            	          'isFront':this.Form.isFront,
            	          'frontIcon':this.Form.iconName,
            	          'componentName':this.Form.componentName,
            	          'meta':this.Form.meta
            	       };
            	if(this.Form.level=='1'){
            		para.parentId=this.Form.parentMenuId;
                    para.parentName=this.Form.parentMenu;
                    para.id=this.tree.checkItem.id
            	}
            	else{para.parentId='';}
            	if(this.dialog.dialogType=='editMenu'){
            		para.id=this.tree.checkItem.id;
            	}
                if(this.dialog.dialogType=='addMenu'){
                    delete para.id;
                }
            	addMenu(para).then((res)=>{
            		if(res.success==true){
            			this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.dialog.show=false;
                        this.getMenuList();
            		}
            		else{
            			this.$message({
                            type: 'error',
                            message: res.msg
                        });
            		}
	          	});
            },
            //删除菜单
            deleteMenu(){
            	this.$confirm('此操作将永久删除该菜单项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                	let para={'id':this.tree.checkItem.id};
                	delMenu(para).then((res)=>{
            		    if(res.success==true){
            		    	this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getMenuList();
            		    }
            		    else{
            		    	this.$message({
                                type: 'error',
                                message: res.msg
                            });
            		    }
	          	    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //获取按钮设置
            getBtnSetting(){
            	this.rightDiv.loading=true;
            	setTimeout(() => {
                    let para={'functionId':this.tree.checkItem.id,'page':this.rightDiv.page,'rows':this.rightDiv.rows};
            	    para.field='id,operationName,operationCode,functionName';
            	    this.rightDiv.rightData=[];
            	    getBtnSetting(para).then((res)=>{
            		    this.rightDiv.total=res.total;
            		    this.rightDiv.rightData=res.rows;
            		    this.rightDiv.loading=false;
	          	    });
                }, 500);
            },
            //翻页回调
            pageChange(val){
            	this.rightDiv.page=val;
            },
            //菜单编辑
            editMenu(data){
                // console.log(data);
            	// if(!this.tree.checkItem){
            	// 	this.$message({
             //            message: '请选择要编辑的条目',
             //            type: 'error'
             //        });
            	// }
            	// else{
            		this.dialog.dialogLoading=true;
            	    this.dialog.dialogType='editMenu';
            	    this.dialog.title='菜单编辑';
                    // let para={'id':this.tree.checkItem.id};
            	    let para={'id':data.id};
            	    getMenuDetail(para).then((res)=>{
            	    	this.Form.menuName=res.obj.functionName;
            	    	this.Form.menuOrder=res.obj.functionOrder;
            	    	this.Form.menuUrl=res.obj.functionUrl;
            	    	this.Form.iconName=res.obj.frontIcon;
            	    	this.Form.componentName=res.obj.componentName;
            	    	this.Form.meta=res.obj.meta;
                        this.Form.isFront=res.obj.isFront;
            	    	if(res.obj.parentId){
            	    		this.Form.level='1';
            	    	    this.Form.parentMenuId=res.obj.parentId;
                            this.Form.parentMenu=res.obj.parentName;
            	    	}
            	    	else{this.Form.level='0';}
	          	    });
            	    this.dialog.show=true;
            	// }
            },
            //操作录入
            addControl(){
            	this.dialog.show=true;
            	this.dialog.dialogLoading=true;
            	this.dialog.dialogType='Control';
            	this.dialog.title='操作录入 ';
            	this.controlForm.name='';
            	this.controlForm.code='';
            	this.controlForm.status='1';
            	this.rightDiv.id='';
            },
            //提交操作
            controlSubmit(){
            	let para={'functionId':this.tree.checkItem.id,
            	          'operationName':this.controlForm.name,
            	          'operationCode':this.controlForm.code,
            	          'status':this.controlForm.status,
            	          'id':this.rightDiv.id
            	}
            	addControl(para).then((res)=>{
            		if(res.success==true){
            		    this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.dialog.show=false;
                        this.getBtnSetting();
            		}
            		else{
            		    this.$message({
                            type: 'error',
                            message: res.msg
                        });
            		}
	          	});
            },
            //删除操作
            delControl(scope){
            	let para={'id':scope.row.id};
            	delControl(para).then((res)=>{
            		this.$confirm('此操作将删除该操作, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        if(res.success==true){
            		        this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.dialog.show=false;
                            this.getBtnSetting();
            		    }
            		    else{
            		        this.$message({
                                type: 'error',
                                message: res.msg
                            });
            		    }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });          
                    });
	          	});
            },
            //编辑操作
            editControl(scope){
            	this.dialog.show=true;
            	this.dialog.dialogLoading=true;
            	this.dialog.dialogType='Control';
            	this.dialog.title='操作录入 ';
            	this.controlForm.name=scope.row.operationName;
            	this.controlForm.code=scope.row.operationCode;
            	this.controlForm.status='1';
            	this.rightDiv.id=scope.row.id;
            },
            //树组件render函数
            renderContent(h, { node, data, store }) {
                return (
                    <span style="width:100%">
                        <span class="treeCol" style="width:20%">
                            <span>{node.label}</span>
                        </span>
                        <span class="treeCol">
                            <span>
                                {node.data.functionorder}
                            </span>
                        </span>
                        <span class="treeCol" style="width:30%">
                            <span class="ellipsis">{node.data.functionurl}</span>
                        </span>
                        <span style="float: right; margin-right: 5px">
                            <el-button size="mini" on-click={ () => this.deleteMenu() }>删除</el-button>
                            <el-button size="mini" on-click={ () => this.editMenu(data) }>菜单编辑</el-button> 
                            <el-button size="mini" on-click={ () => this.getBtnSetting() }>按钮设置</el-button>

                        </span>
                    </span>
                );
            },
  		},
  		mounted() {
		},
  	}
</script>
<style lang="scss">
    .menuManage {
		.header {
			padding: 8px;
			border-bottom: 1px solid #e1e1e1;
			background-color: #fafcfc;
		}
		.contentDiv{
			.treeDiv{
                max-height: 528px;
                overflow: scroll;
				.treeCol{
					width: 10%;
					display: inline-block;
				}
				.ellipsis{
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
					width: 100%;
					display: inline-block;
					line-height: initial;
					vertical-align: sub;
				}
			}
			.rightDiv{
				padding-bottom: 8px;
				.header{
					height: 36px;
				}
				.content{
					.el-button{margin: 8px;}
				}
				.el-pagination{
					margin-top: 4px;
					margin-bottom: 4px;
				}
			}
		}
		.el-dialog{
			.el-dialog__header{
			    background-color: #f8f9fb;
			    border-bottom: 1px solid #e1e1e1;
			    padding:14px;
		    }
		    .el-dialog__body{
		    	padding:12px 12px 0 12px;
		    }
		    .el-input{
		    	display: inline-block;
		    	width: 225px;
		    }
		    .warning{
		    	font-size: 8px;
		    	color: #aaa;
		    	margin-left: 4px;
		    }
		}
	}
</style>	